<template>
  <div>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>设备管理</el-breadcrumb-item>
        <el-breadcrumb-item>设备列表</el-breadcrumb-item>
      </el-breadcrumb>
      <el-form :inline="true" :model="device" class="demo-form-inline">
        <el-row>
            <el-col :span="5">
                <el-form-item label="设备型号">
                    <el-input v-model="device.no" placeholder="请输入设备型号"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="5">
                <el-form-item label="设备名称">
                    <el-input v-model="device.name" placeholder="请输入设备名称"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="5">
                <el-form-item label="采购人">
                    <el-input v-model="device.buyUser" placeholder="请输入采购人名称"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="5">
                <el-form-item label="审批人">
                    <el-input v-model="device.checkUser" placeholder="请输入审批人名称"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="4">
                 <el-form-item>
                    <el-button type="info" @click="onSubmit">查询</el-button>
                    <el-button @click="clear">清空</el-button>
                </el-form-item>
            </el-col>
        </el-row>
      </el-form>
      <el-row>
        <el-col :span="24"><div style="text-align:right;margin: 10px;margin-right:55px;">
          <el-button style="font-size:22px;" @click="goDistribution"><i class="el-icon-office-building"></i>分配设备</el-button>

          <el-popover
            placement="right"
            width="700"
            trigger="click">
            <el-table :data="asklist0">
              <el-table-column fixed width="100" property="baseName" label="申请设施"></el-table-column>
              <el-table-column width="100" property="stockName" label="申请设备"></el-table-column>
              <el-table-column width="80" property="askNum" label="申请数量"></el-table-column>
              <el-table-column width="250" property="reason" label="申请理由"></el-table-column>
              <el-table-column width="100" property="askTime" label="申请时间"></el-table-column>
              <el-table-column fixed="right" width="80" property="explain" label="批复">
                    <template slot-scope="scope">
                      <el-button type="success" size="mini" round @click="approval(scope.row)">批复</el-button>
                    </template>
              </el-table-column>
            </el-table>
            <el-button  slot="reference" style="font-size:22px;" @click="askList0()"><i class="el-icon-edit"></i>待批列表</el-button>
          </el-popover>
          <el-popover
            placement="right"
            width="800"
            trigger="click">
            <el-table :data="asklist12">
              <el-table-column fixed width="100" property="baseName" label="申请设施"></el-table-column>
              <el-table-column width="100" property="stockName" label="申请设备"></el-table-column>
              <el-table-column width="80" property="askNum" label="申请数量"></el-table-column>
              <el-table-column width="250" property="reason" label="申请理由"></el-table-column>
              <el-table-column width="100" property="askTime" label="申请时间"></el-table-column>
              <el-table-column width="100" property="examineTime" label="批复时间"></el-table-column>
              <el-table-column width="300" property="explain" label="附加说明"></el-table-column>
              <el-table-column fixed="right" width="80" property="id" label="操作">
                   <template slot-scope="scope">
                     <el-popconfirm style="margin-left:10px;"
                         cancelButtonText="取消"
                         confirmButtonText="确定"
                         icon="el-icon-info"
                         iconColor="red"
                         title="确定要删除吗？"
                         @confirm='delAsk(scope.row.id)'>
                        <el-button slot="reference"  type="danger" size="mini" round>删除</el-button>
                     </el-popconfirm>
                   </template>
              </el-table-column>
            </el-table>
            <el-button  slot="reference" style="font-size:22px;" @click="askList12()"><i class="el-icon-finished"></i>已批列表</el-button>
          </el-popover>

          <el-tooltip content="转存数据到表格" placement="bottom" effect="light">
            <el-button style="font-size:25px;border: 0;" @click="xlsx"><i class="el-icon-printer"></i> </el-button>
          </el-tooltip>
        </div></el-col>
      </el-row>
        <div class="bbb">
        <el-table class="tab1"
            :data="tableData"
            style="width: 100%">
            <el-table-column fixed type="index" :index="index" label="序号" width="50"></el-table-column>
            <el-table-column prop="no" label="设备型号" width="250"></el-table-column>
            <el-table-column prop="name" label="设备名" width="250"></el-table-column>
            <el-table-column prop="price" label="采购单价(万)" width="150"></el-table-column>
            <el-table-column prop="buyCount" label="采购数量" width="150"></el-table-column>
            <el-table-column prop="totalMoney" label="总价(万)" width="150"></el-table-column>
            <el-table-column prop="useCount" label="分配总数" width="150"></el-table-column>
            <el-table-column prop="buyDate" label="购买日期" width="150"></el-table-column>
            <el-table-column prop="buyUser" label="采购人" width="150"></el-table-column>
            <el-table-column prop="checkUser" label="审批人" width="150"></el-table-column>
             <el-table-column
                  fixed="right"
                  label="操作"
                  width="220">
                  <template slot-scope="scope">
                        <el-button size="mini" @click="table = true;details(scope.row)" round>详情</el-button>
                        <el-button size="mini" @click="goUpdate(scope.row)" round>修改</el-button>
                         <el-popconfirm style="margin-left:10px;"
                             cancelButtonText="取消"
                             confirmButtonText="确定"
                             icon="el-icon-info"
                             iconColor="red"
                             title="删除后数据将无法恢复，确定要删除吗？"
                             @confirm='del(scope.row.id)'>
                            <el-button slot="reference"  type="danger" size="mini" round>删除</el-button>
                         </el-popconfirm>
                  </template>
                </el-table-column>
        </el-table>
        </div>
        <el-pagination class="pag"
            layout="prev, pager, next"
            :total="totle"
            :page-size='pageSize'
            @current-change='change'>
        </el-pagination>

        <!--详情抽屉-->
        <el-drawer
          title=""
          :with-header="false"
          :visible.sync="table"
          direction="rtl"
          size="40%">
          <div  style="color:#019BA0;font-size: 22px;margin:50px;width: 100%;"><span>设备使用详情</span></div>
          <div  style="font-size: 20px;margin:50px;width: 100%;">
            <span>
              设备名:<span style="color:#019BA0;">{{equipment}}</span>
              <span style="margin-left:10px;">总数:<span style="color:#019BA0;">{{allNum}}</span></span>
              <span style="margin-left:10px;">已用:<span style="color:#ff0000;">{{useNum}}</span></span>
              <span style="margin-left:10px;">剩余:<span style="color:#019BA0;">{{ExcedenteNum}}</span></span>
            </span>
           </div>
           <el-table
           :data="gridData"
           stripe
           height="450">
              <el-table-column property="name" label="所用设施" width="150"></el-table-column>
              <el-table-column property="stockNum" label="数量" width="100"></el-table-column>
              <el-table-column property="address" label="地址"></el-table-column>
            </el-table>
        </el-drawer>

        <!--批复框 -->
        <el-dialog title="批复申请" :visible.sync="askVisible" :closeOnClickModal='false' :show-close='false'>
            <el-form  :model="askObject" :rules="rules" ref="ruleForm">
            <el-row>
                <el-col :span="10">
                <el-form-item label="请求设施" label-width="80px">
                    <el-input v-model="askObject.baseName" readonly></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="10">
                <el-form-item label="设备型号" label-width="80px">
                    <el-input v-model="askObject.stockNo" readonly></el-input>
                </el-form-item>
            </el-col>
            </el-row>
            <el-row>
                <el-col :span="10">
                <el-form-item label="申请时间" label-width="80px">
                    <el-input v-model="askObject.askTime" readonly></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="10">
                <el-form-item label="申请理由" label-width="80px">
                    <el-input v-model="askObject.reason" readonly></el-input>
                </el-form-item>
            </el-col>
            </el-row>
            <el-row>
                <el-col :span="10">
                <el-form-item label="设备名称" label-width="80px">
                    <el-input v-model="askObject.stockName" readonly></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="10">
                <el-form-item label="可分配数" label-width="80px">
                    <el-input v-model="askObject.allNum" readonly></el-input>
                </el-form-item>
            </el-col>
            </el-row>
            <el-row>
                <el-col :span="10">
                <el-form-item label="请求数量" label-width="80px">
                    <el-input v-model="askObject.askNum" readonly></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="10">
                <el-form-item label="批复数量" label-width="80px" prop="okNum">
                    <el-input v-model="askObject.okNum" placeholder="请输入批复数量"></el-input>
                </el-form-item>
            </el-col>
            </el-row>
            <el-row>
                <el-col :span="20">
                <el-form-item label="附加说明" label-width="80px" prop="okExplain">
                    <el-input type="textarea" v-model="askObject.okExplain" placeholder="请输入回复说明"></el-input>
                </el-form-item>
            </el-col>
            </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="askVisible = false;closeForm('ruleForm')">关 闭</el-button>
                <el-button type="primary" @click="doApproval('ruleForm')">批 复</el-button>
            </div>
        </el-dialog>

        <!--修改框 -->
        <el-dialog title="修改设备" :visible.sync="addVisible" :closeOnClickModal='false' :show-close='false'>
            <el-form  :model="allObject" :rules="rules" ref="ruleForm">
            <el-row>
                <el-col :span="10">
                <el-form-item label="设备型号" label-width="80px" prop="no">
                    <el-input v-model="allObject.no" placeholder="请输入设备型号"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="10">
                <el-form-item label="设备名称" label-width="80px" prop="name">
                    <el-input v-model="allObject.name" placeholder="请输入设备名称"></el-input>
                </el-form-item>
            </el-col>
            </el-row>
            <el-row>
                <el-col :span="10">
                <el-form-item label="单价(万)" label-width="80px" prop="price">
                    <el-input v-model="allObject.price" placeholder="请输入采购单价"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="10">
                <el-form-item label="采购数量" label-width="80px" prop="buyCount">
                    <el-input v-model="allObject.buyCount" placeholder="请输入采购数量"></el-input>
                </el-form-item>
            </el-col>
            </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="addVisible = false;closeForm('ruleForm')">关 闭</el-button>
                <el-button type="primary" @click="update('ruleForm')">修 改</el-button>
            </div>
        </el-dialog>

        <!--分配设备框 -->
        <el-dialog title="分配设备" :visible.sync="disVisible" :closeOnClickModal='false' :show-close='false'>
            <el-form  :model="dis" :rules="rules" ref="ruleForm">
            <el-row>
                <el-col :span="24">
                <el-form-item label="设施" label-width="80px" style="text-align: left;">
                   <el-cascader style="width:443px;"
                       :options="options"
                       :props="defaultParams"
                       @change="handlerChange"
                       clearable>
                   </el-cascader>
                </el-form-item>
            </el-col>
            </el-row>
            <el-row>
                  <el-col :span="24">
                      <el-form-item label="设备" label-width="80px" prop="device">
                         <el-select v-model="dis.deviceId" placeholder="请选择" style="width:443px;" @change="getNum">
                            <el-option :label="d.name" v-for="d in devices" :key="d.id" :value="d.id"></el-option>
                         </el-select>
                      </el-form-item>
                  </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                  <el-form-item label="可分配总数量" label-width="150px" prop="allCount">
                      <el-input v-model="dis.allCount" readonly></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="10">
                  <el-form-item label="分配数量" label-width="100px" prop="num">
                      <el-input v-model="dis.num" placeholder="请输入分配该设备的数量"></el-input>
                  </el-form-item>
                </el-col>
            </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="disVisible = false;closeForm('ruleForm')">关 闭</el-button>
                <el-button type="primary" @click="distribution('ruleForm')">分 配</el-button>
            </div>
        </el-dialog>

  </div>
</template>

<script>
  export default{
      data(){
          return{
              device:{
                  no:'',
                  name:'',
                  buyUser:'',
                  checkUser:'',
              },
              tableData:[],
              totle:10,
              pageSize:6,
              pageIndex:1,

            // 框显示标志
            addVisible:false,
            //详情框
            table: false,
            equipment:'',
            allNum:'',
            gridData: [],
            ExcedenteNum:'',
            useNum:'',
            //分配框
            disVisible:false,
            dis:{
              deviceId:'',
              allCount:0,
              num:'',
            },
            options:[],
            defaultParams: {
               value: 'id',
               label: 'name',
               children: 'childrenBase'
            },
            devices:[],
            oneId:'',
            twoId:'',
            threeId:'',

            asklist0:[],
            asklist12:[],
            askVisible:false,
            askObject:{
              id:'',
              baseName:'',
              stockNo:'',
              askTime:'',
              reason:'',
              stockName:'',
              allNum:'',
              askNum:'',
              okNum:'',
              okExplain:'',
            },

            //转表格
            xlsxData:[],
            // 框数据
            allObject:{
                id:'',
                no:'',
                name:'',
                price:'',
                buyCount:'',
            },
            rules:{
              base: [{
                required: true,
                message: '不能为空',
                trigger: 'blur'
              }],
              deviceId: [{
                required: true,
                message: '不能为空',
                trigger: 'blur'
              }],
              num: [{
                required: true,
                message: '不能为空',
                trigger: 'blur'
              },
              {
                pattern:'^[1-9]\\d*$',
                message: '不是正整数',
                trigger: 'blur'
              }],
              okNum: [{
                required: true,
                message: '不能为空',
                trigger: 'blur'
              },
              {
                pattern:'^[1-9]\\d*$',
                message: '不是正整数',
                trigger: 'blur'
              }],
              okExplain:[{
                  required: true,
                  message: '不能为空',
                  trigger: 'blur'
              }],
              no: [{
                required: true,
                message: '不能为空',
                trigger: 'blur'
              }],
              name: [{
                 required: true,
                 message: '不能为空',
                 trigger: 'blur'
               }],
              buyCount: [{
                 required: true,
                 message: '不能为空',
                 trigger: 'blur'
               },
               {
                 pattern:'^[1-9]\\d*$',
                 message: '不是正整数',
                 trigger: 'blur'
               }],
              price: [{
                 required: true,
                 message: '不能为空',
                 trigger: 'blur'
               },
               {
                 pattern:'^[0-9]+([.]{1}[0-9]+){0,5}$',
                 message: '不是数字',
                 trigger: 'blur'
               }],
            }

        }
      },
      methods:{

        delAsk(id){
          this.axios.get("/ask/delBaseAsk?id="+id).then(res=>{
                if(res.data.code==200){
                  this.sucMsg("删除成功");
                }
          })
        },
        goDistribution(){//分配装备
            //1.得到基站列表
           this.axios.get("/base/allBase").then(res=>{
               this.options=res.data.data;

               //2.得到设备列表
               this.axios.get("device/getStockAll").then(res=>{
                     this.devices=res.data.data;
               });
            });
            this.disVisible=true;

        },
        askList0(){
           this.axios.get("/ask/getAskAll0").then(res=>{
               this.asklist0=res.data.data;
           });
        },
        approval(row){
           let stockId=row.stockId;
           this.axios.get("/ask/getStock?stockId="+stockId).then(res=>{
              let stock=res.data.data;
              this.askObject.id=row.id;
              this.askObject.baseName=row.baseName;
              this.askObject.stockNo=stock.no;
              this.askObject.askTime=row.askTime;
              this.askObject.reason=row.reason;
              this.askObject.stockName=stock.name;
              this.askObject.allNum=stock.buyCount-stock.useCount;
              this.askObject.askNum=row.askNum;
              this.askVisible=true;
           });

        },
        doApproval(ruleForm){
           this.$refs[ruleForm].validate((valid) => {
                if (valid){
                  if(this.askObject.okNum>this.askObject.allNum){
                    this.errorMsg("数量不够")
                  }else{
                     this.axios.get("/ask/Reply?id="+ this.askObject.id+"&okNum="+this.askObject.okNum+"&explain="+this.askObject.okExplain).then(res=>{
                         if(res.data.code==200){
                           this.askVisible=false;
                           this.sucMsg("已批复");
                         }
                     });
                  }
                }
           })

        },
        askList12(){
           this.axios.get("/ask/getAskAll12").then(res=>{
               this.asklist12=res.data.data;
           });
        },
        getNum(){
          let id=this.dis.deviceId;
          for(let d of this.devices){
            if(d.id==id){
               this.dis.allCount=d.buyCount-d.useCount;
            }
          }
        },
        distribution(ruleForm){
            this.$refs[ruleForm].validate((valid) => {
                if (valid && this.threeId!='' && this.dis.deviceId!='') {
                  if(this.dis.num>this.dis.allCount){
                    this.errorMsg("数量不够")
                  }else{
                    this.axios.get("/device/disStockToBase?baseId="+this.threeId+"&stockId="+this.dis.deviceId+"&disNum="+this.dis.num).then(res=>{
                           if(res.data.code==200){
                               this.getList();
                               this.sucMsg("分配成功")
                              this.disVisible=false;
                           }
                    })
                  }


                }else{
                  this.errorMsg("不能为空")
                }
            })


        },
        handlerChange(item) {
          this.oneId='';
          this.twoId='';
          this.threeId='';
          this.oneId=item[0];
          this.twoId=item[1];
          this.threeId=item[2];
        },
        xlsx(){
        	import('@/utils/Export2Excel').then(excel => {
        		  const tHeader = ['设备型号','设备名','采购单价(万)','采购数量','总价(万)','分配总数','购买日期','采购人','审批人']; // 表头数据
        		  const filterVal = ['no','name','price','buyCount','totalMoney','useCount','buyDate','buyUser','checkUser'];//对应的字段名
        		  this.axios.get("device/getStockAll").then(res=>{
                this.xlsxData=res.data.data;
                const list = this.xlsxData;
                const data = this.formatJson(filterVal, list)
                excel.export_json_to_excel(tHeader,data,'设备列表')
              })

        		})
          },
          formatJson(filterVal, jsonData) {
            return jsonData.map(v => filterVal.map(j => {
              return v[j]
            }))
          },
          clear(){
              this.device.no=''
              this.device.name=''
              this.device.buyUser=''
              this.device.checkUser=''
             this.dis.deviceId=""
          },
          change(index){
              this.pageIndex=index;
              this.getList();
          },
          getList(){
              this.axios.post("device/getAll?pageIndex="+this.pageIndex+"&pageSize="+this.pageSize,this.device).then(res=>{
                this.totle=res.data.data.total;
                this.tableData=res.data.data.list;
                this.pageSize=res.data.data.pageSize;
            })
          },
          onSubmit(){
              this.pageIndex=1;
              this.getList();
          },
          index(dex){
              return (this.pageIndex-1)*this.pageSize+dex+1;
          },
          details(device){
              this.equipment=device.name;
              this.allNum=device.buyCount;
              let id=device.id;
              this.axios.get("/basestock/getBaseStock?id="+id).then(res=>{
                 this.gridData=res.data.data;
                 let fornum=0;
                 for(let num of res.data.data){
                   fornum+=num.stockNum;
                 }
                 this.useNum=fornum;
                 this.ExcedenteNum=this.allNum-this.useNum;
              })
          },
          goUpdate(device){
             this.allObject.id=device.id;
             this.allObject.no=device.no;
             this.allObject.name=device.name;
             this.allObject.price=device.price+'';
             this.allObject.buyCount=device.buyCount+'';
             this.addVisible=true;
          },
          closeForm(ruleForm) {
            this.$refs[ruleForm].resetFields();
            this.clear();
          },
          update(ruleForm){
              this.$refs[ruleForm].validate((valid) => {
                  if (valid) {
                    this.axios.post("/basestock/updatebasestock",this.allObject).then(res=>{
                      if(res.data.code=200){
                         this.addVisible=false;
                         this.getList();
                         this.sucMsg("修改成功");
                      }

                    });

                  }
              })
          },
          del(id){
           this.axios.get("/basestock/removebasestock?id="+id).then(res=>{
               if(res.data.code=200){
                  this.getList();
                  this.sucMsg("删除成功");
               }
           })
          },
          sucMsg(msg) {
                this.$message({
                  message: msg,
                  offset:150,
                  duration:1000,
                  type: 'success'
                });
          },
          errorMsg(msg) {
              this.$message.error({
                message: msg,
                offset:150,
                duration:1000
              });
          }
      },

      created() {
          this.getList();
      },

  }
</script>

<style scoped>
 .el-row {
    margin-left: 30px;
  }
  .el-col {
    border-radius: 4px;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
  .el-breadcrumb{
      height: 60px;
      line-height: 60px;
      font-size: 17px;
      margin-left: 30px;
  }
  .btn1{
      margin-left: 30px;
  }
  .tab1{
      margin-top:25px;
      margin-left: 30px;
  }
  .pag{
      text-align: center;
  }
  .bbb{
      height:400px;
      width: 96%;
  }
</style>
